@sitecore-jss/sitecore-jss

Sitecore JavaScript Rendering SDK

This module is provided as a part of Sitecore JavaScript Rendering SDK. It contains the core JSS APIs (layout service) and utilities.

Documentation (Experience Platform)

Documentation (XM Cloud)

API reference documentation

Changelog

22.3.0 / 22.3.1

🐛 Bug Fixes

• [templates/angular-xmcloud] Navigation component link forces full page reload (#1958)
• [sitecore-jss-nextjs] Link component prefetches files (#1956)
• [templates/nextjs] [templates/react] [templates/angular] [templates/vue] Fixed an issue when environment variable is undefined (not present in .env), that produced an "undefined" value in generated config file (#1875)
• [templates/nextjs] Fix embedded personalization not rendering correctly after navigation through router links. (#1911)
• [template/angular] Prevent client-side dictionary API call when SSR data is available (#1930) (#1932)
• [sitecore-jss-angular] Fix default empty field components to not render the unwanted wrapping tags (#1937) (#1940)
• [sitecore-jss-angular] Fix image field style property not rendered properly (#1944)
• [sitecore-jss-angular] Fix nested dynamic placeholders not being displayed in Pages (#1947)
• [sitecore-jss-dev-tools] getMetadata() now uses npm query command to get the list and exact versions of packages. this solution works for monorepo setups (#1949)
• [templates/nextjs-sxa] Fix an alignment issue where components using both me-auto and ms-md-auto classes resulted in inconsistent alignment of elements. (#1946) (#1950) (#1955)
• [sitecore-jss-proxy]``[sitecore-jss-nextjs] Fix for getCSPHeader so that it returns proper value for the CSP header when JSS_ALLOWED_ORIGINS lists multiple origins delimited with comma. (#1972)
• [sitecore-jss-proxy] Support Editing Host protection by handling OPTIONS preflight requests (#1976)
• [templates/nextjs] Disable x-powered-by header

🎉 New Features & Improvements

• [Beta] Angular support for XM Cloud with SPA Proxy:
  • [create-sitecore-jss] Introduced "node-xmcloud-proxy" addon (#1863)
  • [create-sitecore-jss] [template/angular] [template/angular-sxp] [template/angular-xmcloud] Introduced "angular-sxp", "angular-xmcloud" addons (#1838)(#1845)(#1858)(#1865):
    • The Angular app should now be initialized by providing both templates (or using CLI prompts):
      • SXP-based: 'angular,angular-sxp'
      • XMCloud-based: 'angular,angular-xmcloud'
    • Rework Angular initializer to support XMCloud and SXP journeys;
    • Add SXA styles to xmcloud addon
  • [create-sitecore-jss] [template/angular] [template/angular-xmcloud] [template/node-xmcloud-proxy] Edge Proxy / Context Id support (#1875)(#1885)
  • [create-sitecore-jss] Rework Angular initializer to support XMCloud and SXP journeys (#1845)(#1858)(#1868)(#1881)(#1882)(#1931)
    • [create-sitecore-jss] Allow node-xmcloud-proxy app to be installed alongside Angular SPA application
    • proxyAppDestination arg can be passed into create-sitecore-jss command to define path for proxy to be installed in
  • [templates/angular] [templates/angular-xmcloud] [template/node-xmcloud-proxy] [sitecore-jss-proxy] Introduced /api/editing/config endpoint (#1903)
  • [templates/angular] [templates/angular-xmcloud] [template/node-xmcloud-proxy] [sitecore-jss-proxy] Introduced /api/editing/render endpoint (#1908)
  • [templates/angular-xmcloud] [template/node-xmcloud-proxy] Personalization support (#1964#1971#1973)
  • [create-sitecore-jss] [sitecore-jss-angular] [template/angular-xmcloud] Angular SXA components
    • Angular placeholder now supports SXA components (#1870)
    • Component styles (#1917)
    • Title component (#1904)
    • Richtext component (#1864)
    • Container component (#1872)
    • Angular SXA layout (#1873)(#1880)(#1890)(#1906)
    • RowSplitter component(#1901)
    • LinkList component(#1898)
    • ColumnSplitter (#1889)
    • PartialDesignDynamicPlaceholder component (#1902)
    • Promo component (#1897)
    • PageContent component (#1905)
    • Navigation component (#1894)
  • [sitecore-jss-angular] Placeholder component will now render metadata code blocks when in Metadata Edit mode (#1918)
  • [sitecore-jss] [sitecore-jss-angular] Default Placeholder Content for empty fields in editMode metadata - in edit mode metadata in Pages, angular package field directives will render default or custom placeholder content if the provided field is empty; (#1916)
    • custom placeholder content can be provided to field directives by passing the corresponding input:
    • scDateEmptyFieldEditingTemplate for scDate
    • scGenericLinkEmptyFieldEditingTemplate for scGenericLink
    • scImageEmptyFieldEditingTemplate for scImage
    • scLinkEmptyFieldEditingTemplate for scLink
    • scRichTextEmptyFieldEditingTemplate for scRichText
    • scRouterLinkEmptyFieldEditingTemplate for scRouterLink
    • scTextEmptyFieldEditingTemplate for scText
  • [sitecore-jss-angular] [templates/angular-xmcloud] Render clientScripts / clientData. The new sc-editing-scripts component is exposed from sitecore-jss-angular package and required to be rendered on the page to enable Metadata Edit mode. (#1924)(#1948)
  • [sitecore-jss-angular] [templates/angular-xmcloud] XM Cloud Forms support (#1951):
    • New "Form" component is introduced in the sitecore-jss-angular package.
    • The Form component is declared in the Angular sample app.
    • Introduced plugins technique for component factory generation.
  • [template/node-xmcloud-proxy] [sitecore-jss-proxy] Introduced /api/healthz endpoint (#1928)
  • [sitecore-jss] [sitecore-jss-angular] Render field metdata chromes in editMode metadata - in edit mode metadata in Pages, angular package field directives will render wrapping code elements with field metadata required for editing; (#1926)
  • [angular-xmcloud] [sitecore-jss-angular] Analytics and CloudSDK integration
    • [angular-xmcloud] Add CloudSDK initialization on client side (#1952)(#1957)(#1961)
    • [angular-xmcloud] [sitecore-jss-angular] Add CDP Page View component to Angular XM Cloud add-on (#1957)
  • [templates/angular] Update dependencies and proxy build path value to be unix style path to support xmcloud deployment and monorepo starter kit in xmcloud foundation head (#1977)
  • [templates/angular] [templates/angular-sxp] [templates/angular-xmcloud] Updates for Angular XMC sample to work well with local containers and spa-starters monorepo in xmcloud-foundation (#1983)
  • [sitecore-jss-angular] [templates/angular] Integrate CloudSDK events firing (#1984)(#1990)
• [sitecore-jss] GenericFieldValue model is updated to accept Date type (#1916)
• [templates/vue] [sitecore-jss-vue] Vue version has been updated to 3.5 (#1995(#1970))

🛠 Breaking Change

• [sitecore-jss] Set FETCH_WITH.REST to 'REST' instead of 'Rest' (#1927):
  • The FETCH_WITH.REST constant has been updated to 'REST' instead of 'Rest' to match the value that we mention in the documentation. If you are using this constant in your code, please update your FETCH_WITH env variable to 'REST'.
• [templates/angular] [sitecore-jss-angular] A new JssStateService has been introduced in the sitecore-jss-angular package, enhancing type safety and enabling state sharing across the application and SDK components. As a result, the JssContextService now relies on JssStateService for state management.(#1918)
• [sitecore-jss-proxy] Updated exports of the module for better extensibility (#1903)
  • express@^4.19.2 dependency is marked as a peer dependency
  • Default scProxy middleware export is replaced by headlessProxy object that contains the middleware, ProxyConfig, ServerBundle properties
• Update to Node.js 22 (#1975)(#1992):
  • [nextjs] [react] [angular] [node-headless-ssr-proxy] Updated typescript to latest version
  • [nextjs] Updated @typescript-eslint to version 8
• [Next.js] [Angular] [Proxy] Update CloudSDK to 0.4.2 (#1994)

🧹 Chores

• [templates/angular] [templates/node-xmcloud-proxy] [templates/node-headless-ssr-proxy] [templates/node-headless-ssr-experience-edge] Adjust out of box .gitignore rules
• New Angular add-on's are not scaffolded within build pipeline (#1962)
• Release process, maintenance simplification (#1960)
• [template/angular-xmcloud]``[template/xmcloud-proxy] Add README.md (#1965)(#1989)